<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读了么！-确认订单</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link href="style/order.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
    <script src="layui/layui.all.js" charset="utf-8"></script>
</head>
<body>
<div class="order">
    <div class="selectAddress">
        <h2>选择收货地址：</h2>
        <div style="margin-left: 50px">
            <button class="newAddress">添加新的收货地址</button>
        </div>
        <script>
            $(".newAddress").click(function () {
                layer.open({
                    type: 2,
                    title: '添加新地址',
                    area: ['440px', '500px'],
                    content: ['aa.html', 'no'], //iframe的url，no代表不显示滚动条
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submit = layero.find('iframe').contents().find("#btn_save");
                        iframeWindow.layui.form.on('submit(btn_save)', function (data) {
                            var field = data.field; //获取表单数据
                            var country = field.country;
                            var province = field.province;
                            var city = field.city;
                            var county = field.county;
                            var street = field.county;
                            var detailAddress = field.detailAddress;
                            var phoneNumber = field.phoneNumber;
                            var name = field.name;
                            $.ajax({
                                url: '',
                                dataType: 'json',
                                method: 'post',
                                data: {
                                    'country': country,
                                    'province': province,
                                    'city': city,
                                    'county': county,
                                    'street':street,
                                    'detailAddress':detailAddress,
                                    'phoneNumber':phoneNumber,
                                    'name':name
                                },
                                success:function (data) {
                                    alert(1)
                                }
                            })
                            layer.close(index); //关闭弹层
                        });
                        submit.click();
                    }
                })
            })
        </script>
    </div>
    <script>
        $(document).ready(function () {
            var userId = 100020;
            var deliveryId = 0;
            $.ajax({
                url: 'data.json',
                method: 'post',
                dataType: 'json',
                data: {'userId': userId},
                success: function (data) {
                    $.each(data, function (i, item) {
                        var deliveryId = item.deliveryId;
                        var name = item.name;
                        var country = item.country;
                        var county = item.county;
                        var province = item.province;
                        var city = item.city;
                        var street = item.street;
                        var detailedAddress = item.detailedAddress;
                        var phoneNumber = item.phoneNumber;
                        $(".selectAddress").append("<div class='address'><div class='pcA'>" + "收货地址" + "<a class='did'>" + deliveryId + "</a>" + ":" + country + province + city + county + street + detailedAddress + "</div><div class='detailA'>" + "收货人：" + name + phoneNumber + "</div></div>");
                    });
                    $(".selectAddress").on('click', '.address', function (e) {
                        $(".address").css("background-image", "url('image/mail.jpg')");
                        $(this).css("background-image", "url('image/mail_1.jpg')");
                        deliveryId = $(e.target).find(".did").text();
                        // console.log(deliveryId);
                    })
                },
            });
        });
    </script>
    <div class="orderOK">
        <h2>确认订单信息：</h2>
        <div class="head">
            <span class="span1">店铺商品</span>
            <span class="span2">单价</span>
            <span class="span3">数量</span>
            <span class="span4">小计</span>
        </div>
        <div class="order-order">
        </div>
        <script>
            $(document).ready(function () {
                var userId = 0;
                $.ajax({
                    url: 'data1.json',
                    dataType: 'json',
                    method: 'post',
                    data: {'userId': userId},
                    success: function (data) {
                        $.each(data.books, function (i, item) {
                            var shopName = item.shopName;
                            var bookName = item.bookName;
                            var price = item.price;//单价
                            var totalPrice = data.totalPrice;//小计
                            var count = data.count;//数量
                            console.log(shopName);
                            $(".order-order").append("<div class=''>" + shopName + "</div>" + "<div>" + bookName + price + count + "</div>");
                            $("#total").text(totalPrice)
                        })
                    }
                });
            })
        </script>
        <div class="allInfo">
            <h1>实付款：</h1>
            <a style="color: #4E5465;font-size: 22px;margin-left: 70px">￥</a>
            <a style="color: red;font-size: 30px" id="total"></a>
        </div>
        <div class="btnSubmit">
            <a href="#" style="border: 1px dotted red">返回购物车</a>
            <input type="submit" value="提交订单并去支付" class="btn">
        </div>
    </div>
</div>
</body>
</html>
